<template>
    <div class="dashboard">
        <header>
            <span>{{storeN}}</span>
            <span>{{userN}}</span>
        </header>
        <div class="content">
            <!--订单统计数等-->
            <div class="sums">
                <div class="orderSum sum1">
                    <p>今日订单数</p>
                    <span>{{memberData.CURRDAYORDER}}</span>
                </div>
                <div class="newUserSum sum1">
                    <p>新增用户数</p>
                    <span>{{memberData.NEWUSERNUM}}</span>
                </div>
                <div class="memberSum sum1">
                    <p>会员总数</p>
                    <span>{{memberData.USERTOTAL}}</span>
                </div>
            </div>
            <!--储值卡充值消费情况-->
            <div class="storedCard" v-loading="loading">
                <div class="consumeDate">
                    <p>储值卡充值消费情况</p>
                    <span>
                        <el-date-picker @change="agree1" v-model="value2" type="daterange" :picker-options="pickerOptions1" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
                    </span>
                </div>
                <div class="consumeInfo">
                    <div class="rechargeSum sum2">
                        <p>储值卡充值</p>
                        <span>{{cardData.RECHARGETOTAL}}元</span>
                    </div>
                    <div class="giveSum sum2">
                        <p>储值卡赠送</p>
                        <span>{{cardData.GIVETOTAL}}元</span>
                    </div>
                    <div class="rechargeTimes sum2">
                        <p>储值卡充值单数</p>
                        <span>{{cardData.RECHARGENUM}}</span>
                    </div>
                    <div class="consumeTimes sum2">
                        <p>储值卡消费单数</p>
                        <span>{{cardData.CONSUMENUM}}</span>
                    </div>
                </div>
            </div>
            <!--商品销售分析-->
            <div class="goodsSaleInfo">
                <div class="saleAnalysis">
                    <p>商品销售分析</p>
                    <div>
                        <p>
                            <el-date-picker @change="agree2" v-model="value3" type="daterange" :picker-options="pickerOptions2" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
                        </p>
                        <span>
                            <el-select :disabled="disA" @change="selComp" clearable v-model="value4" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.COMP_ID" :label="item.SHOP_NAME" :value="item.COMP_ID"> </el-option>
                            </el-select>
                        </span>
                    </div>
                </div>
                <div class="typeRatio">
                    <!--文档https://www.hcharts.cn/demo/highcharts-->
                    <div v-if="!flags" class="chartData" id="container" style="width:700px;height:400px;">
                        <pie :id="id" :option="option"></pie>
                    </div>
                    <div v-if="flags" style="min-width:850px;height:400px;text-align:center;color:#484848;"></div>
                    <!--表格-->
                    <div class="tableData">
                        <el-table v-loading="loading" :data="listData" style="width: 100%">
                            <el-table-column label="排名" type="index" width="160"> </el-table-column>
                            <el-table-column prop="SUBJECT" label="销售商品名" width="180">
                                <template slot-scope="scope">
                                    <span style="color:#1d93ff;">{{ scope.row.SUBJECT }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="AMOUNT" label="销售额" width="160"> </el-table-column>
                            <el-table-column prop="PERCENTAGE" label="占比" width="160"> </el-table-column>
                        </el-table>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page1" :page-sizes="[6, 8, 10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.COUNT"> </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { asyncRouterMap } from '@/router/index'
    import Schart from 'vue-schart';
    import dateSelect from '@/assets/js/date_time_picker.js' //日期选择器数据封装
    import { setCookie, getCookie } from '@/assets/js/cookie'
    import $ from 'jquery'
    import pie from '@/views/dashboard/indexCharts'
    export default {
        name: 'dashboard',
        data() {
            return {
                storeN: '', //门店名
                userN: '', //用户名
                pickerOptions1: dateSelect,
                pickerOptions2: dateSelect,
                startTime1: '', //当天时间
                value2: '', //储值卡时间
                value3: '', //商品销售分析时间                
                options1: [],
                value4: '', //门店                
                tableDatas: [],
                loading: true,
                page1: 1, //当前页数
                pageSize1: 6, //每页多少条
                memberData: '', //会员
                cardData: '', //充值卡
                classData: [], //类别 
                newClassData: [],
                id: 'test',
                option: {
                    chart: {
                        type: 'pie', //饼图
                        options3d: {
                            enabled: true, //使用3d功能
                            alpha: 60, //延y轴向内的倾斜角度
                            beta: 0,
                        }
                    },
                    title: {
                        text: '类别占比' //图表的标题文字
                    },
                    subtitle: {
                        text: '' //副标题文字
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true, //每个扇块能否选中
                            cursor: 'pointer', //鼠标指针
                            depth: 35, //饼图的厚度
                            dataLabels: {
                                enabled: true, //是否显示饼图的线形tip
                                format: '<b>{point.name}</b>:{point.percentage:.1f}%'
                            }
                        }
                    },
                    series: [
                    {
                        type: 'pie',
                        name: '销售额', //统一的前置词,非必须                        
                        data: [],
                    }]
                },
                flags: false, //为true表示图表没有数据
                arr_one: [],
                arr_two: [],
                str_one: '', //一级菜单字符串
                str_two: '', //二级菜单字符串
                disA: false, //下拉框是否禁用
            }
        },
        computed: {
            //请求参数
            objs() {
                let obj = {};
                obj.PAGE_NO = this.page1;
                obj.PAGE_SIZE = this.pageSize1;
                if(this.value3 === null) {
                    this.value3 = '';
                }
                if(this.value3.length > 0) {
                    obj.STARTTIME = this.value3[0].getTime();
                    obj.ENDTIME = this.value3[1].getTime();
                }                
                if(this.value4 && this.value4 !== 'QB'){
                	obj.COMP_ID = this.value4;
                }
                return obj;
            },
            //分页数据
            listData() {
                if(this.tableDatas.PROINFO) {
                    return this.tableDatas.PROINFO;
                }
            },
        },
        created() {
            /* ----------权限管理---------- */
            if(getCookie('compId') !== 0) {
            	this.disA = true;
                let self = this;
                //console.log(asyncRouterMap);
                this.$axiosPost('/4SCAFE/cafeUser/getMenuListByUserId.action', {
                    CAFEUSER_ID: getCookie('userId')
                }).then(res => {
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        //动态加载路由
                        res.MENU_DATA.forEach((v) => {
                            //一级菜单
                            self.arr_one.push(v.MENUID);
                            //二级菜单
                            v.MENUS.forEach((n) => {
                                self.arr_two.push(n.SECMENUNAME);
                            })
                        })
                    }
                    self.str_one = self.arr_one.join(',');
                    self.str_two = self.arr_two.join(',');
                    //0-功能  11-管理  19-统计  20-设置  
                    //asyncRouterMap[0].hidden = true;  
                    //asyncRouterMap[0].children[0].hidden = true;
                    //--------------------------功能----------------------------
                    if(self.str_one.indexOf(2) === -1) {
                        this.$set(asyncRouterMap[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('营销管理') === -1) {
                        this.$set(asyncRouterMap[0].children[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('优惠券管理') !== -1) {                    	
                        this.$set(asyncRouterMap[0].children[1], 'hidden', false);
                    }
                    if(self.arr_two.indexOf('广告位管理') === -1) {
                        this.$set(asyncRouterMap[0].children[2], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('积分商城管理') === -1) {
                        this.$set(asyncRouterMap[0].children[3], 'hidden', true);
                    }
                    //--------------------------功能----------------------------
                    //--------------------------管理----------------------------
                    if(self.str_one.indexOf(3) === -1) {
                        this.$set(asyncRouterMap[11], 'hidden', true);
                    }
                    if(self.str_two.indexOf('门店管理') === -1) {
                        this.$set(asyncRouterMap[11].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('商品管理') === -1) {
                        this.$set(asyncRouterMap[11].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('会员管理') === -1) {
                        this.$set(asyncRouterMap[11].children[2], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单管理') === -1) {
                        this.$set(asyncRouterMap[11].children[3], 'hidden', true);
                    }
                    if(self.str_two.indexOf('退款管理') === -1) {
                        this.$set(asyncRouterMap[11].children[4], 'hidden', true);
                    }
                    //--------------------------管理----------------------------
                    //--------------------------统计----------------------------
                    if(self.str_one.indexOf(4) === -1) {
                        this.$set(asyncRouterMap[19], 'hidden', true);
                    }
                    if(self.str_two.indexOf('用户分析') === -1) {
                        this.$set(asyncRouterMap[19].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单分析') === -1) {
                        this.$set(asyncRouterMap[19].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('储存卡分析') === -1) {
                        this.$set(asyncRouterMap[19].children[2], 'hidden', true);
                    }
                    //--------------------------统计----------------------------
                    //--------------------------设置----------------------------
                    if(self.str_one.indexOf(5) === -1) {
                        this.$set(asyncRouterMap[20], 'hidden', true);
                    }
                    if(self.str_two.indexOf('积分设置') === -1) {
                        this.$set(asyncRouterMap[20].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('账号设置') === -1) {
                        this.$set(asyncRouterMap[20].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('系统设置') === -1) {
                        this.$set(asyncRouterMap[20].children[2], 'hidden', true);
                    }
                    //--------------------------设置----------------------------
                    console.log(self.str_one, self.str_two);
                })
            }
            /* ----------权限管理---------- */
            if(!getCookie('userName') || !getCookie('compId')) {
                this.$router.push({
                    path: '/login'
                })
                return;
            }
            this.userN = getCookie('userName');
            let d = new Date();
            let dd = new Date();
            dd.setDate(dd.getDate() - 1);
            this.value2 = this.value3 = [dd, d]; //默认为最近一天        	        	
            this.get4SCafeShopList();
        },
        methods: {
            //获取所有门店
            get4SCafeShopList() {
                this.$axiosPost('/4SCAFE/CafeActivitySystem/get4SCafeShopList.action').then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.options1 = res.SHOP_LIST;
                        //门店列表增加 全部 二字
                        this.options1.unshift({
                        	COMP_ID:'QB',
                        	SHOP_NAME:'全部'
                        });                        
                        this.options1.forEach((v) => {
                            if(getCookie('compId') && v.COMP_ID === getCookie('compId')) {
                                this.storeN = v.SHOP_NAME;
                            }
                        })
                        if(res.SHOP_LIST.length === 0) {
                            console.log('门店都没有！！');
                            return;
                        }
                        if(getCookie('compId')) {
                            this.value4 = getCookie('compId')
                        } else {
                            this.value4 = res.SHOP_LIST[0].COMP_ID;
                        }
                        this.getAll();
                    }
                })
            },
            getAll() {
                this.flags = true;
                this.$axiosPost('/4SCAFE/back/statistics/homeStatistics.action', this.objs).then(res => {
                    this.loading = true;
                    //this.flags = false;
                    if(res.STATUS_CODE === 1) {
                        this.flags = false;
                        this.loading = false;
                        this.tableDatas = res;
                        this.memberData = res.USERINFO;
                        this.cardData = res.CARDINFO;
                        this.classData = res.CLASSINFO; //原来的类比数据
                        if(this.classData.length === 0) {
                            this.flags = true;
                        }
                        this.newClassData = JSON.parse(JSON.stringify(this.classData)); //复制的类比数据
                        this.newClassData.forEach(function(v) {
                            v.name = v.CLASSNAME;
                            v.y = v.AMOUNT;
                        })
                        //console.log(this.newClassData);                          
                        this.option.series[0].data = this.newClassData;
                    }
                }).catch(res => {
                    this.loading = true;
                    console.dir(res);
                    this.$message.error('服务器异常');
                })
            },
            handleSizeChange(val) {
                this.loading = true;
                this.pageSize1 = val;
                this.getAll();
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.page1 = val;
                this.getAll();
            },
            agree1() {
                this.loading = true;
                this.value3 = this.value2;
                this.getAll();
            },
            agree2() {
                this.loading = true;
                this.value2 = this.value3;
                this.getAll();
            },
            selComp() {
                this.loading = true;
                this.getAll();
            },
        },
        components: {
            Schart,
            pie
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .dashboard {
        min-height: 100%;
        background: #f0f2f5;
        header {
            height: 42px;
            text-align: end;
            line-height: 42px;
            cursor: pointer;
            background: #fff;
            span:nth-of-type(1) {
                font-size: 20px;
                color: #646464;
            }
            span:nth-of-type(2) {
                font-size: 8px;
                color: #949494;
                margin: 0 34px 0 8px;
            }
        }
        .content {
            .sums {
                width: 97%;
                height: 100px;
                background: #fff;
                margin: 25px auto;
                display: flex;
                .sum1 {
                    width: 33.33%;
                    text-align: center;
                    position: relative;
                    p {
                        font-size: 14px;
                        color: #949494;
                    }
                    span {
                        font-size: 26px;
                        font-weight: 700;
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        height: 50%;
                        width: 2px;
                        background: #dcdcdc;
                    }
                }
                .memberSum {
                    &:before {
                        content: '';
                        display: none;
                    }
                }
            }
            .storedCard {
                width: 97%;
                background: #fff;
                margin: 0 auto;
                .consumeDate {
                    border-bottom: 1px solid #dcdcdc;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 10px 0;
                    p {
                        font-size: 16px;
                        font-weight: 700;
                        margin-left: 25px;
                    }
                    span {
                        margin-right: 25px;
                    }
                }
                .consumeInfo {
                    height: 66.67%;
                    display: flex;
                    align-items: center;
                    .sum2 {
                        width: 25%;
                        padding-bottom: 10px;
                        text-align: center;
                        position: relative;
                        p {
                            font-size: 14px;
                            color: #949494;
                        }
                        span {
                            font-size: 26px;
                            font-weight: 700;
                        }
                        &:before {
                            content: '';
                            position: absolute;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            height: 50%;
                            width: 2px;
                            background: #dcdcdc;
                        }
                    }
                    .consumeTimes {
                        &:before {
                            content: '';
                            display: none;
                        }
                    }
                }
            }
            .goodsSaleInfo {
                width: 97%;
                margin: 25px auto;
                background: #fff;
                .saleAnalysis {
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    >p {
                        font-size: 16px;
                        font-weight: 700;
                        margin-left: 25px;
                    }
                    div {
                        display: flex;
                        align-items: center;
                        margin-right: 25px;
                    }
                }
                .typeRatio {
                    margin-top: 30px;
                    display: flex;
                    justify-content: center;
                    .chartData {
                        width: 50%;
                    }
                    .tableData {
                        width: 750px;
                        .el-pagination {
                            text-align: center;
                            margin-top: 30px;
                        }
                    }
                }
            }
        }
    }
</style>